<template>
    <view class="cart-item-specs">
        <view class="item-main">
            <view class="specs" v-if="spaceItem.V_AttributeNameValue"><text>规格:</text><text class="specs-text">{{
                spaceItem.V_AttributeNameValue }}</text></view>
            <view class="price"><text class="price-text">￥{{ spaceItem.V_FactPrice }}</text><text>/{{ spaceItem.UnitName
                    }}</text></view>
        </view>
        <view class="item-right">
            <uni-icons class="item-del" type="trash" v-if="false"></uni-icons>
            <vk-data-input-number-box class="input-number-box" Amount" :min="minBuyNum || 0" :step="stepBuyNum || 1"
                :step-strictly="stepStrictly" :positive-integer="true" @minus="changeAmount(-1, spaceItem)"
                @blur="changeAmount(0, spaceItem)" @plus="changeAmount(1, spaceItem)"></vk-data-input-number-box>
        </view>
    </view>
</template>

<script>
import { updateSupplierCart } from "@/utils/cartUtil.js"
export default {
    props: {
        spaceItem: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {
            selectNum: 0,
            stepStrictly: true,
            minBuyNum: 0,
            stepBuyNum: 1,
            maxNum: 999,
        }
    },
    mounted() { },
    methods: {
        changeAmount(type, itemData) {
            let _obj = {
                Amount: itemData.Amount,
                ProductId: itemData.ProductId,
                Ratio: itemData.Ratio,
                SkuId: itemData.SkuId,
                UnitId: itemData.UnitId,
                UnitName: itemData.UnitName,
            }
            let param = []
            param.push(_obj)
            updateSupplierCart(param, true)
        },
    },
}
</script>

<style lang="scss">
.cart-item-specs {
    display: flex;
    flex-direction: row;
    border-bottom: solid 1rpx $uni-bg-color-grey;
    padding: $app-page-padding 0;

    .item-left {
        display: flex;
        align-items: center;
        margin-right: 20rpx;
    }

    .item-main {
        display: flex;
        flex: 1;
        flex-direction: column;
        margin-right: 20rpx;

        .specs {}
    }

    .item-right {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;

        .item-del {
            margin-bottom: 6rpx;
        }
    }

    .price-text {
        color: $color-red;
        font-size: $font-size-30;
    }
}
</style>
